<template>
<div>
	<!-- 面包屑导航 -->
   <!-- <div>
         <div class="crumbs">
             <el-breadcrumb separator="/">
                 <el-breadcrumb-item>
                     <i class="el-icon-lx-home"></i> 房态中心
                 </el-breadcrumb-item>
             </el-breadcrumb>
         </div>
		 -->
		<!-- 标签导航 --> 
		 <div>
		 <el-tabs type="border-card">
		   <el-tab-pane label="房态图">
			   <div style="height: 4px;background-color: #FB192B;margin-top: -8px;margin-bottom: 4px;">
				   
			   </div>
			      <div class="select">
					<!--  客房编号
					  客房类型
					  所在楼层 -->
					  <el-input v-model="input1" placeholder="客房号/客名" class="El01">
						  <el-button slot="append" icon="el-icon-search"></el-button>
					  </el-input>
					  
					  <el-select v-model="value1" multiple placeholder="所有客房" class="El02">
					     <el-option
					        v-for="item in options"  
					        :key="item.value"
					        :label="item.label"
					        :value="item.value">
					      </el-option>
					    </el-select>
					  
					  <el-select v-model="value2" multiple placeholder="所有楼层" class="El03">
					     <el-option
					        v-for="item in options"
					        :key="item.value"
					        :label="item.label"
					        :value="item.value">
					      </el-option>
					    </el-select>
						
						
				   <el-radio-group v-model="radio">	
					  <el-radio :label="1" class="El04" ><span>按房型</span></el-radio>
					  <el-radio :label="2" class="El05" ><span>按房号</span></el-radio>
					  <el-radio :label="3" class="El06" ><span>按楼层</span></el-radio>
					  <el-radio :label="4" class="El07" ><span>房务区</span></el-radio>
			       </el-radio-group>	
				  </div>
		           
			   
		   </el-tab-pane>
		   
		   <el-tab-pane label="房态表">
			        <el-row>        
			     			      <el-button  class="el-icon-refresh" style="background-color:white;color:#014893;border-color:#014893;">  刷新</el-button>
			     				  <el-button  style="background-color:white; color:#014893;border-color:#014893;">房态统计</el-button>
			     			    </el-row>
			     				<div style="height:10px"></div>
			     			   <el-table
			     			           :data="tableData"
			     			           border
			     			           style="width: 100%">
			     			       <el-table-column
			     			               prop="date"
			     			               label="房间类型"
			     						   width="70">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="name"
			     			               label="总房数"
			     						   width="59">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="address"
			     			               label="在住房数"
			     						   width="70">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="address"
			     			               label="今入住数"
			     						   width="70">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="address"
			     			               label="预抵房数"
			     						   width="70">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="address"
			     			               label="预离房数"
			     						   width="70">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="address"
			     			               label="维修房数"
			     						   width="70">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="address"
			     			               label="停用房数"
			     						   width="70">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="address"
			     			               label="保留房数"
			     						   width="70">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="address"
			     			               label="可售房数"
			     						   width="70">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="address"
			     			               label="可用房数"
			     						   width="70">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="address"
			     			               label="可用房数(含预离)"
			     						   width="120">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="address"
			     			               label="换房积分房数"
			     						   width="100">
			     			       </el-table-column>
			     			       <el-table-column
			     			               prop="address"
			     			               label="当前出租率"
			     						   width="90">
			     			       </el-table-column>
			     				   <el-table-column
			     				           prop="address"
			     				           label="预期出租率"
			     						   >
			     				   </el-table-column>
			     			   
			     			   </el-table>
			                <div>
								<p><span>*</span>可售房数 = 总房数 - 在住房数 - 预抵房数 + 预离房数 - 维修房数 - 停用房数 - 保留房数可售房数 = 总房数 - 在住房数 - 预抵房数 + 预离房数 - 维修房数 - 停用房数 - 保留房数</p>
							    <p><span>*</span>可用房数 = 总房数 - 在住房数 - 维修房数 - 停用房数 - 保留房数</p>
								<p><span>*</span>可用房数(含预离) = 总房数 - 在住房数 - 维修房数 - 停用房数 - 保留房数 + 预离房数</p>
								<p><span>*</span>当前出租率 = 在住房数 / 总房数</p>
								<p><span>*</span>预期出租率 = (在住房数 + 预抵房数 - 预离房数 + 即开即退间夜数) / 总房数</p>
								<p><span>*</span>预期房租 = 在住房价 - 预离房价 + 即开即退房价</p>
								<p><span>*</span>预期平均房租 = 预期房租 / (在住房数 + 预抵房数 - 预离房数 + 即开即退间夜数 - 换房积分房数)</p>
							</div>
		   </el-tab-pane> 
		  
	        <el-tab-pane label="远期房态">角色管理</el-tab-pane>
		   <el-tab-pane label="电子消费">定时任务补偿</el-tab-pane>
		   
		   <el-tab-pane label="查房列表">
			   <ul class="LiSelect">
				 <li> <el-button  style="background-color:white; color:#014893;border-color:#014893;">待查</el-button></li>  
				 <li> <el-button  style="background-color:white; color:#014893;border-color:#014893;">在查</el-button></li>
				   <li> <el-button  style="background-color:white; color:#014893;border-color:#014893;">已查</el-button></li>
				  <li> <el-button  style="background-color:white; color:#014893;border-color:#014893;">超时</el-button></li>
				   <li> <el-button  style="background-color:white; color:#014893;border-color:#014893;">已结</el-button></li>
				   <li> <el-button  style="background-color:white; color:#014893;border-color:#014893;">全部</el-button></li>
				   <li></li>
			   </ul>
				
			   
			   
			   
			  
			   
		   </el-tab-pane>
	
	
	
		   <el-tab-pane label="遗留物品">角色管理</el-tab-pane>
		   <el-tab-pane label="物品管理">角色管理</el-tab-pane>
		   <el-tab-pane label="房务列表">角色管理</el-tab-pane>
		   <el-tab-pane label="门卡管理">角色管理</el-tab-pane>
		 </el-tabs>
		 </div>
		 
		 
    </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
export default {
    name: 'dashboard',
    data() {
        return {
          tableData:[],
		  options:[{}],
		  input1:'',
		  value1:[],
		  value2:[],
		  input3:'',
		  radio:0,
    }

    }

};
</script>


<style scoped>
   p{
	       display: block;
	       margin-block-start: 1em;
	       margin-block-end: 1em;
	       margin-inline-start: 0px;
	       margin-inline-end: 0px;
		   background: #fff;
		   font-family: "Microsoft YaHei",宋体,Arial,Helvetica,sans-serif;
		   font-size: 12px;
		   line-height: 24px;
		   color: #555;
		   /* overflow-y: scroll; */
   }

   
   
   p span{
	      color: #e62722;
	      margin-right: 5px; 
   }


    .select{
		   width: 170px;
		   height: 475px;
		   background-color: #EEEEEE; 
		   overflow: auto;
	}

     .El01{
		 height: auto;
		 width: 150px;
		 margin-left: 10px;
		 margin-top: 10px;
	 }

    .El02{
    		 height: auto;
    		 width: 150px;
    		 margin-left: 10px;
    		 margin-top: 5px;
    }
	
    .El03{
    		 height: auto;
    		 width: 150px;
    		 margin-left: 10px;
    		 margin-top: 5px;
    }
    
    .El04{
		margin-left: 13px;
		margin-top: 10px;
	}
	
	.El04 span{
		font-size: 10px;
		margin-left: -5px;
	}
	
	.El05{
		margin-right: 15px;
		margin-top: 10px;	
	    float: right; 
	}
	
	.El05 span{
		font-size: 10px;
	  	margin-top: 10px;
		margin-left: -5px;
	}
	  
	  .El06{
	  	margin-left: 13px;
		}
		
	  .El06 span{
	  	font-size: 10px;
	  	margin-left: -5px;
	  }
	    
      .El07{
      	margin-left: 2px;
      	margin-top: 10px;
	
      }
      
      .El07 span{
      	font-size: 10px;
      	margin-left: -5px;
      }
        
</style>
